<template>
  <div class="drawer_box">
    <div class="btn_box" style="width: 20%; margin-top: 10px">
      <div
        @click="btnClick(item, index)"
        :class="{ isAtv: isIndex == index }"
        class="itemz flex_center_center"
        v-for="(item, index) in jqArrCv"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
    <div style="width: 80%">
      <div
        class="flex_bw_center"
        style="transform: translate(-1px, 1px); margin-bottom: 10px"
      >
        <!-- <div style="display: flex">
        <el-select
          v-model="selectValue"
          placeholder="监区"
          style="width: 200px"
        >
          <el-option
            v-for="item in optionsS"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-button
          title="查询"
          class="filter-item"
          style="margin-left: 10px"
          type="primary"
          :icon="Search"
          @click="getCriminalInfoSelect"
        >
        </el-button>
      </div> -->
      </div>

      <div class="state_box">
        <el-divider content-position="left"> 监内</el-divider>
        <el-descriptions :column="1">
          <el-descriptions-item label="监内住院">
            <span class="number_box"> {{ jnzyValue.length }} </span>
            <el-select
              v-model="jnzyValue"
              filterable
              multiple
              placeholder=""
              style="width: 80%"
              :disabled="!isShow"
            >
              <el-option
                v-for="item in jnzyArr"
                :key="item.provinceCode"
                :label="item.name"
                :value="item.provinceCode"
              />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label="离监探亲">
            <span class="number_box"> {{ ljtqValue.length }} </span>
            <el-select
              v-model="ljtqValue"
              filterable
              multiple
              placeholder=""
              style="width: 80%"
              :disabled="!isShow"
            >
              <el-option
                v-for="item in jnzyArr"
                :key="item.provinceCode"
                :label="item.name"
                :value="item.provinceCode"
              />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label="禁闭">
            <span class="number_box"> {{ jbfrValue.length }} </span>
            <el-select
              v-model="jbfrValue"
              filterable
              multiple
              placeholder=""
              style="width: 80%"
              :disabled="!isShow"
            >
              <el-option
                v-for="item in jnzyArr"
                :key="item.provinceCode"
                :label="item.name"
                :value="item.provinceCode"
              />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label="惩戒训导">
            <span class="number_box"> {{ cjxdValue.length }} </span>
            <el-select
              v-model="cjxdValue"
              filterable
              multiple
              placeholder=""
              style="width: 80%"
              :disabled="!isShow"
            >
              <el-option
                v-for="item in jnzyArr"
                :key="item.provinceCode"
                :label="item.name"
                :value="item.provinceCode"
              />
            </el-select>
          </el-descriptions-item>
        </el-descriptions>
        <el-divider content-position="left"> 监外</el-divider>

        <el-descriptions :column="1">
          <el-descriptions-item label="解回再审">
            <span class="number_box"> {{ jhzsValue.length }} </span>
            <el-select
              v-model="jhzsValue"
              filterable
              multiple
              placeholder=""
              :disabled="!isShow"
              style="width: 80%"
            >
              <el-option
                v-for="item in jnzyArr"
                :key="item.provinceCode"
                :label="item.name"
                :value="item.provinceCode"
              />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label="监外执行">
            <span class="number_box"> {{ jwzxValue.length }} </span>
            <el-select
              v-model="jwzxValue"
              filterable
              multiple
              placeholder=""
              :disabled="!isShow"
              style="width: 80%"
            >
              <el-option
                v-for="item in jnzyArr"
                :key="item.provinceCode"
                :label="item.name"
                :value="item.provinceCode"
              />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label="监外住院">
            <span class="number_box"> {{ jwzyValue.length }} </span>
            <el-select
              v-model="jwzyValue"
              filterable
              multiple
              :disabled="!isShow"
              placeholder=""
              style="width: 80%"
            >
              <el-option
                v-for="item in jnzyArr"
                :key="item.provinceCode"
                :label="item.name"
                :value="item.provinceCode"
              />
            </el-select>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>

<script setup>
import http from "@/utils/api";
import {
  Search,
  Share,
  Upload,
  TakeawayBox,
  Refresh,
  Collection,
  Plus,
  Loading,
  FolderDelete,
  Back,
} from "@element-plus/icons-vue";
import {
  ref,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  onBeforeMount,
  nextTick,
  onUnmounted,
} from "vue";
import { defineProps, defineEmits } from "vue";
const activeName = ref("普管级");
const props = defineProps({
  zfztText: {
    type: String,
    default: "",
  },
  orgIds: {
    type: Object,
    default: {},
  },
  jqArr: {
    type: Array,
    default: [],
  },
});
let CriminalInfoSelectList = ref([]);

const selectValue = ref("");

const optionsS = ref([
  {
    id: "Option1",
    name: "Option1",
  },
]);

let dateSfm = ref("");
let hour = ref("");
let daydata = ref("");
// 获取年月日 时
const getFormattedDateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");
  dateSfm.value = `${hours}:${minutes}:${seconds}`;
  hour.value = String(now.getHours()).padStart(2, "0");
  daydata.value = `${year}-${month}-${day}`;

  return `${year}-${month}-${day} ${hour.value}`;
};
let jnzyArr = ref([]);
const getCriminalInfoSelect = async () => {
  let res = await http.zfpt.CriminalInfoSelect({
    page: 1,
    limit: 999,
    criminalNo: "",
    name: "",
    state: "jnzy,ljtq,jbfr,cjxd,jwzy,jwzx,jhzs,zcfr,zyfr,syfr",
    jsh: "",
    orgId: selectValue.value,
    "location": '',
    "joinDate": '',
  });
  if (res && res.code == 0) {
    jnzyArr.value = res.data.data;
    getCriminalStateSelect();
  }
};

let jnzyValue = ref([]);
let ljtqValue = ref([]);
let cjxdValue = ref([]);
let jbfrValue = ref([]);
let jwzxValue = ref([]);
let jwzyValue = ref([]);
let jhzsValue = ref([]);
let arrCv = ref({});

const getCriminalStateSelect = async () => {
  let res = await http.zfpt.CriminalStateSelect({
    page: 1,
    limit: 500,
    orgId: selectValue.value,
    criminalNo: "",
    name: "",
    state: "jwzy,jwzx,jnzy,ljtq,jbfr,cjxd,jhzs",
    startDate: "",
    endDate: daydata.value + " " + dateSfm.value,
  });
  if (res && res.code == 0) {
    if (res.data.data.length) {
      let dataArr = res.data.data;
      jnzyValue.value = [];
      ljtqValue.value = [];
      jbfrValue.value = [];
      cjxdValue.value = [];
      jwzxValue.value = [];
      jwzyValue.value = [];
      jhzsValue.value = [];
      dataArr.forEach((item) => {
        if (item["criminalNo"]) {
          item["provinceCode"] = item.criminalNo;
        }
        if (item.state == "jnzy") {
          jnzyValue.value.push(item.criminalNo);
        }
        if (item.state == "ljtq") {
          ljtqValue.value.push(item.criminalNo);
        }
        if (item.state == "jbfr") {
          jbfrValue.value.push(item.criminalNo);
        }
        if (item.state == "cjxd") {
          cjxdValue.value.push(item.criminalNo);
        }
        if (item.state == "jwzx") {
          jwzxValue.value.push(item.criminalNo);
        }
        if (item.state == "jwzy") {
          jwzyValue.value.push(item.criminalNo);
        }
        if (item.state == "jhzs") {
          jhzsValue.value.push(item.criminalNo);
        }
      });

      setTimeout(() => {
        arrCv.value = jnzyArr.value.filter(
          (item) =>
            ![
              ...jnzyValue.value,
              ...ljtqValue.value,
              ...jbfrValue.value,
              ...cjxdValue.value,
              ...jwzxValue.value,
              ...jwzyValue.value,
              ...jhzsValue.value,
            ].includes(item.provinceCode)
        );
        jnzyArr.value = arrCv.value;
      }, 500);
    } else {
      jnzyValue.value = [];
      ljtqValue.value = [];
      jbfrValue.value = [];
      cjxdValue.value = [];
      jwzxValue.value = [];
      jwzyValue.value = [];
      jhzsValue.value = [];
    }
  }
};
let jqArrCv = ref([]);
let isIndex = ref(0);
const btnClick = (item, index) => {
  selectValue.value = item.id;
  isIndex.value = index;
  getCriminalInfoSelect();
};

watch(
  () => props.jqArr,
  (newValue, oldValue) => {
    if (newValue) {
      if (props.jqArr) {
        jqArrCv.value = JSON.parse(JSON.stringify(props.jqArr));
        jqArrCv.value.forEach((item,index)=>{
          if(item.name == props.zfztText){  
            isIndex.value = index;
          }
        })
        let allJq = jqArrCv.value.map((itz) => itz.id);
        selectValue.value = allJq[ isIndex.value];
      }
      getFormattedDateTime();
      getCriminalInfoSelect();
    } else {
    }
  },
  {
    deep: true, // 深度监听
    immediate: true, // 立即触发回调
  }
);
</script>

<style scoped lang="scss">
::v-deep .el-descriptions__body {
  background-color: rgb(8, 32, 78) !important;
}
::v-deep .el-descriptions__body .el-descriptions__table {
  background-color: rgb(9, 42, 102) !important;
  border-radius: 4px;
}
::v-deep .el-descriptions__label:not(.is-bordered-label) {
  color: white;
  margin-left: 4px;
}
::v-deep .el-select__wrapper.is-disabled {
  background-color: #2d476e4a;
  box-shadow: 0 0 0 1px #2963d8 inset;
}
.isAtv {
  background-color: rgb(4 110 250 / 27%) !important;
  font-weight: bold;
}

::v-deep .el-divider--horizontal {
  border-top: 1px rgb(5, 112, 146) !important;
}
::v-deep .el-divider__text {
  border: 1px solid rgb(5, 112, 146) !important;
  background-color: transparent;
  color: white;
  font-size: 12px;
  height: 20px;
  line-height: 16px;
}

.number_box {
  margin-right: 14px;
  display: inline-block;
  color: white;
}
::v-deep .el-descriptions__body .el-descriptions__table .el-descriptions__cell {
  height: 100px;
}
::v-deep .el-descriptions__label {
  width: 60px;
  display: inline-block;
}
::v-deep .isTable .el-table {
  .cell {
    height: 30px;
    text-align: center;
    // border: 1px solid #ccc;

    font-size: 12px;
    line-height: 38px;
  }
}
.drawer_box {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  .drawer_text {
    position: absolute;
    top: -23px;
    left: 2px;
    font-size: 18px;
  }
}
</style>
